<!--
 * @Descripttion: PC商城
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-12 22:21:17
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-15 10:34:59
-->
<template>
  <div class="PCmanage">
    <el-card class="basic">
      <div slot="header">
        <span class="title">企业档案</span>
        <el-button class="bt" type="text" @click="exit" v-if="isEdit">退出</el-button>
        <el-button class="bt" type="text" @click="saveBasic" v-if="isEdit">保存</el-button>
        <el-button class="bt" type="text" @click="isEdit = true" v-else>修改</el-button>
      </div>
      <el-form
        :model="supplier"
        label-width="120px"
        label-position="left"
        :rules="rules"
        ref="ruleForm"
      >
      <el-form-item :label="item.label" class="row" :prop="item.data" v-for="item,id in supplierShowType" :key="id">
        <div class="showData" v-if="!isEdit">
          <span :class="{ content: true, 'no-data': !supplier[item.data] }">{{
           AreaCodeToText(supplier[item.data]) || "未填写"
          }}</span>
        </div>
        <div class="editData" v-else>
          <el-input v-if="item.type == 'text'"
            :type="item.type"
            v-model="supplier[item.data]"
            placeholder="请输入内容"
            :maxlength="item.maxlength"
            show-word-limit
          ></el-input>
          <el-input v-else-if="item.type == 'textarea'"
            :type="item.type"
            v-model="supplier[item.data]"
            placeholder="请输入内容"
            :maxlength="item.maxlength"
            rows="5"
            show-word-limit
          ></el-input>
          <el-cascader v-else
              size="large"
              :options="region"
              v-model="supplier[item.data]"
            >
          </el-cascader>
        </div>
      </el-form-item>
      </el-form>
    </el-card>
    
    <br>
    <el-card class="basic">
      <div slot="header">
        <span class="title">轮播图</span>
        <el-button class="bt" type="text" @click="savePictures">保存</el-button>
      </div>
      <!-- 上传图片 -->
      <div class="product-images">
        <div class="add">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :http-request="httpRequestFn"
              :disabled="imgList.length > 3"
              :limit="1">
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="tips">
            <div class="text">图片数量1~4张，支持的图片格式：.jpg</div>
          </div>
        </div>
        <div class="images" v-if="imgList.length > 0">
          <div class="img" v-for="obj,id in imgList" :key="id">
            <img v-lazy="obj.photo_url">
            <div class="shade">
              <i class="el-icon-delete" @click="deleteImage(id)"></i>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { AreaData, AreaCodeToText, AreaTextToCode, upLoadPicture, Rules } from '@/utils/utils'
export default {
  name: "InfomationManage2",
  data() {
    return {
      // 上传的图片
      imgList: [],
      originImgList: [],
      
      originSupplier: {},
      supplier: {
        supplier_name: "", // 店铺名称
        introduction: "", // 店铺介绍
        address: "", // 所在地区
        link_man: "", //  联系人
        link_phone: "", // 联系电话
        message: "", //备注
      },
      addressCode: '', 
      supplierShowType: [
        { label: '店铺名称', data: 'supplier_name', type:'text', maxlength: 50, }, 
        { label: '店铺介绍', data: 'introduction', type:'textarea', maxlength: 500 }, 
        { label: '所在地区', data: 'address'} ,
        { label: '联系人', data: 'link_man', type:'text', maxlength: 15 }, 
        { label: '联系电话', data: 'link_phone', type:'text', maxlength: 11 }, 
        { label: '备注', data: 'message', type:'textarea', maxlength: 500}, 
      ],
      isEdit: false,
      region: AreaData(),

      //校验手机号码
      rules: {
        link_phone: [{ validator: Rules.phone, trigger: "blur" }],
      },
    };
  },
  computed: {
    //各数据状态，true有数据，false没数据
    supplierNameStatus: function () {
      return this.supplier.supplier_name.length > 0;
    },
    supplierIntroductionStatus: function () {
      return this.supplier.introduction.length > 0;
    },
    supplierMainProductsStatus: function () {
      return this.supplierMainProducts.length > 0;
    },
    supplierAreaStatus: function () {
      return this.supplier.address && this.supplier.address.length > 0;
    },
    supplierLinkPeopleStatus: function () {
      return this.supplier.link_man.length > 0;
    },
    supplierLinkPhoneStatus: function () {
      return this.supplier.link_phone.length > 0;
    },
    supplierDescriptionStatus: function () {
      return this.supplier.message.length > 0;
    },
  },
  methods: {
    AreaCodeToText,
    exit() {
      this.$refs['ruleForm'].resetFields(); // 清除校验提示
      this.isEdit = false
      this.load()
    },
    savePictures() {
      let taskList = []
      for (let obj of this.originImgList) { // 图片地址删除
        taskList.push(this.$API.deleteSupplierPhotos(obj.id))
      }
      let taskList2 = []
      for (let obj of this.imgList) { // 图片地址上传
        taskList2.push(this.$API.addSupplierPhotos(obj))
      }
      Promise.all(taskList) .then((response) => {
        if ((response.status = 200)) {
          return Promise.all(taskList2)
        }
      }).then(res => {
        if ((res.status = 200)) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.load()
        }
      })
    },
    saveBasic() {
      this.$API.modifySupplier({
        ...this.supplier,
        address: AreaCodeToText(this.supplier.address)
      }, this.supplier.id)
      .then((response) => {
        if (response.status == 200) {
          this.$message.success("修改成功");
          this.isEdit = false
        }
      });
    },
    // 删除图片
    deleteImage(id) {
      this.imgList.splice(id, 1)
    },
    httpRequestFn(res) {
      upLoadPicture(res, url => {
        this.imgList.push({
          "supplier_id": this.$store.state.saler.saler_id,
          "photo_url": url
        })
      })
    },
    async load() {
      let sid = this.$store.state.saler.saler_id
      if (!sid) {
        this.$message.warning("没登录")
        return;
      }
      await this.$API.getOneSupplier(sid).then((response) => {
        if (response.status == 200) {
          this.originSupplier = Object.assign({}, response.data)
          this.supplier = response.data;
          this.supplier.address = AreaTextToCode(this.supplier.address)
          return this.$API.getSupplierPhotos()
        }
      }).then(res => {
        if (res.status == 200) {
          this.imgList = []
          for (let obj of res.data) {
            if (obj.supplier_id == sid) {
              this.imgList.push(obj)
            }
          }
          this.originImgList = [...this.imgList]
        }
      })
    },
  },
  created() {
    this.load();
  },
};
</script>


<style lang="less" scoped>
//没有数据的填写框
.no-data {
  color: #999aaa;
}
.bt{
  float: right; 
  padding: 0;
  margin-left: 20px;
}
.tips{
  color: @color-tips;
}
.PCmanage {
  .title{
    color: @color-theme;
  }
  .basic {
    padding: 20px;
    .row {
      .showData {
        .content {
          display: inline-block;
          word-break: break-all;
          white-space: normal;
        }
      }
    }
    .product-images{
      .add{
        display: flex;
        .tips{
          display: flex;
          flex-direction: column-reverse;
          padding-left: 20px;
        }
        .avatar-uploader {
          width: 100px;
          height: 100px;
          /deep/ .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
          }
          .el-upload:hover {
            border-color: #409eff;
          }
          .avatar-uploader-icon {
            font-size: 28px;
            color: #3264a9;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
          }
        }
      }
      .images{
        height: 100px;
        display: flex;
        margin-top: 20px;
        .img{
          position: relative;
          margin-right: 20px;
          img{
            height: 100px;
          }
          &:hover .shade{
            display: flex;
          }
          .shade{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            background: rgba(0,0,0,0.5);
            z-index: 2;
            i{
              font-size: 30px;
              color: #E6A23c;
            }
            display: none;
          }
        }
      }
    }
  }
}
</style>
